<template>
  <div class="liststyle">
      <!-- 基本属性 -->
      <el-divider content-position="left">基本属性</el-divider>
    
    <!-- 列表编辑选项 -->
    <el-form label-width="90px" label-position="left" size="small">
      <el-form-item label="显示标题">
        <el-switch v-model="datas.showHeader"></el-switch>
      </el-form-item>
      
      <el-form-item label="标题文本" v-if="datas.showHeader">
        <el-input v-model="datas.headerText" placeholder="请输入列表标题"></el-input>
      </el-form-item>
      
      <el-form-item label="样式设置">
        <el-checkbox v-model="datas.border">显示边框</el-checkbox>
        <el-checkbox v-model="datas.stripe">显示斑马纹</el-checkbox>
      </el-form-item>
      
      <el-form-item label="显示项">
        <el-checkbox v-model="datas.showAvatar">显示头像</el-checkbox>
        <el-checkbox v-model="datas.showActions">显示操作按钮</el-checkbox>
      </el-form-item>
      
      <div v-if="datas.showActions">
      <el-divider content-position="left">操作按钮</el-divider>

        <el-form-item>
          <el-button type="primary" size="small" @click="addAction" style="margin-bottom: 10px;">
            添加操作按钮
          </el-button>
        </el-form-item>
        
        <div class="action-list">
          <div v-for="(action, index) in datas.actions" :key="index" class="action-item">
            <el-input v-model="datas.actions[index]" placeholder="按钮文本"></el-input>
            <el-button 
              type="danger" 
              icon="Delete" 
              size="small" 
              circle
              @click="removeAction(index)"
            ></el-button>
          </div>
        </div>
      </div>
      
      <el-divider content-position="left">列表项</el-divider>
      
      <el-button type="primary" size="small" @click="addItem" style="margin-bottom: 15px;">
        添加列表项
      </el-button>
      
      <div v-for="(item, index) in datas.items" :key="index" class="list-item-edit">
        <div class="item-header">
          <span>列表项 {{ index + 1 }}</span>
          <el-button 
            type="danger" 
            size="small" 
            icon="Delete" 
            circle
            @click="removeItem(index)"
            :disabled="datas.items.length <= 1"
          ></el-button>
        </div>
        
        <el-form-item label="标题">
          <el-input v-model="item.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        
        <el-form-item label="描述">
          <el-input v-model="item.description" placeholder="请输入描述"></el-input>
        </el-form-item>
        
        <el-form-item label="头像链接" v-if="datas.showAvatar">
          <el-input v-model="item.avatar" placeholder="请输入头像图片链接"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'liststyle',
  props: {
    datas: Object,
    'data-type': String,
  },
  methods: {
    addItem() {
      const newIndex = this.datas.items.length + 1;
      this.datas.items.push({
        title: `列表项${newIndex}`,
        description: `描述文本${newIndex}`,
        avatar: ''
      });
    },
    removeItem(index) {
      if (this.datas.items.length > 1) {
        this.datas.items.splice(index, 1);
      }
    },
    addAction() {
      this.datas.actions.push('新操作');
    },
    removeAction(index) {
      this.datas.actions.splice(index, 1);
    }
  }
}
</script>

<style scoped lang="less">
.liststyle {
  width: 100%;
  box-sizing: border-box;
  
  /* 标题 */
  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }
  
  .list-item-edit {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
  
  .action-list {
    margin-bottom: 15px;
    
    .action-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
      .el-input {
        flex: 1;
        margin-right: 10px;
      }
    }
  }
}
</style> 